<template>
  <div>
    <el-form
      ref="formItem"
      :rules="formItemRule"
      :model="formItem"
      @submit.native.prevent
      label-width="100px"
    >
      <el-form-item label="名称" prop="cityName">
        <el-input v-model="formItem.cityName" placeholder="请输入名称"/>
      </el-form-item>
      <el-form-item label="状态">
        <el-radio-group v-model="formItem.status">
            <el-radio :label="0">隐藏</el-radio>
            <el-radio :label="1">显示</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="排序">
        <el-input-number :min="0" v-model="formItem.sort" placeholder="请输入名称"/>
      </el-form-item>
      <el-form-item>
        <el-button @click="close">取消</el-button>
        <el-button @click="submit" class="mr-5" type="primary">确认</el-button>

      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { cityDetailApi ,citySaveApi} from '@/api/base'
export default {
  props: {
    id:{
        default:0
    }
  },
  data() {
    return {
      formItem: {
        cityName: '',
        status: 1,
        sort: 0,
      },
      formItemRule:{
        cityName:[{required: true, message: '请输入名称',trigger:'blur'}]
      }
    };
  },
  mounted() {
    if(this.id){
        this.getInfo();
    }
  },
  methods: {
    getInfo(){
        cityDetailApi(this.id).then(res => {
            let data = res;
            Object.entries(this.formItem).forEach(([index,item])=> {
                this.formItem[index] = data[index]
            })
        })
    },
    submit(){
        this.$refs.formItem.validate(valid => {
            if(valid){
                let form = this.formItem;
                form.id = this.id; 
                form.cityName = form.cityName
                citySaveApi(form).then(res => {
                    this.$message.success('提交成功')
                    this.$emit('submitSuccess')
                })
                .catch(err => {
                    this.$message.error('提交失败')
                })
            }
        })
    },
    close(){
        this.$emit('cancel')
    }
  },
};
</script>

<style>
</style>